<template>
	<view class="marginAuto">
		<view class="bg-white radius-df margin-top-sm padding-lr padding-tb-sm">
			<view class="flex-between padding-bottom-sm">
				<view class="">物流公司</view>
				<view class="">{{companyName}}</view>
			</view>
			<view class="flex-between">
				<view class="">快递单号</view>
				<view class="">{{shipNum}}<text class="border padding-tb-xxs padding-lr-sm text-sm round margin-left-sm" @tap="copy">复制</text></view>
			</view>
		</view>
		<view class="bg-white margin-top-sm radius-df padding-tb-lg">
			<view class="time-axis" v-if="list.length">
				<view class="timeaxis-item" v-for="(item,index) in list" :key="index">
					<view class="text-black tui-ptop">{{item.acceptStation}}</view>
					<view class="text-sm text-type2">{{item.acceptTime}}</view>
					<view class="timeaxis-node">
						<view class="node-dot"></view>
					</view>
				</view>
			</view>
			<view class="text-center text-lg text-black" v-else>
				暂无物流信息
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:'',
				companyName:'',//快递公司
				shipNum:'',//快递单号
				list:[],
			};
		},
		methods: {
			getDatas() {
				this.$ajax.wuliu({OrderNo:this.orderId}).then(res => {
					this.companyName=res.data.expressCompanyName
					this.shipNum=res.data.logisticCode
					this.list=res.data.traces
				})
			},
			copy() {
				let vm = this;
				uni.setClipboardData({
				    data: vm.shipNum,
				    success: function () {
				        vm.$apis.msg('复制成功');
				    }
				});
			}
		},
		onLoad(e) {
			this.orderId = e.id;
			this.getDatas();
		}
	}
</script>

<style lang="scss">
.time-axis {
	padding:0 10upx 0 45px;
	box-sizing: border-box;
	position: relative;
	
	&::before {
		content: " ";
		position: absolute;
		left: 24px;
		top: 8rpx;
		width: 1px;
		bottom: 0;
		border-left: 1px solid #DDDDDD;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
	}
}


.timeaxis-item {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		.tui-ptop {
			display: flex;
			justify-content: flex-start;
			line-height: 36rpx;
		}
		.order-title {
			padding-bottom: 10rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		.timeaxis-node {
			position: absolute;
			top: 0;
			left: -21px;
			transform-origin: 0;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;
			background-color: #fafafa;
			font-size: 24rpx;
			.node-dot {
				height: 20rpx;
				width: 20rpx;
				background-color: #ddd;
				border-radius: 50%;
				margin-top: 6rpx;
			}
		}
	}

	
</style>
